<template>
  <svg aria-hidden="true" class="svg-icon" :width="size" :height="size">
    <use :xlink:href="symbolID" :fill="color ?? '#000'" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from "vue";

interface ISvgPreviewProps {
  /** 尺寸 */
  size: number | string;
  /** 颜色 */
  color?: string;
  /** 对应Icons文件夹下的svg名称 */
  name: string;
}
const props = defineProps<ISvgPreviewProps>();

const symbolID = computed(() => {
  return `#icon-${props.name}`;
});
</script>

<style scoped></style>
